<template>
  <div class="as-rules-area" v-if="sequences.rules.length >0">
    <div v-if="sequences.rules.length > 1" class="as-rules-condition">
      <span class="as-rules-split"></span>
      <div class="as-rules-condition-option">
        <a-button class="as-rules-condition-button" v-on:click="switchCondition">{{ sequences.condition === 'AND' ? '且' : '或' }}</a-button>
      </div>
    </div>
    <div class="as-rules-items">
      <ActionSequence
        class="act-sequence"
        v-for="(item,index) in sequences.rules"
        :key="item.id"
        v-bind:index="index"
        v-bind:rule="item"
        v-bind:properties="properties"
        v-bind:events="events"
        v-bind:datasourceId="datasourceId"
        @removeGroup="removeGroup"
      >
      </ActionSequence>
    </div>

  </div>
</template>

<script>
import ActionSequence from "./ActionSequence";
import {getDay} from "@/utils/util";
export default {
  name: "UserActionSequenceGroup",
  components: {ActionSequence},
  props: {
    sequences: Object,
    events: Array,
    properties: Array,
    datasourceId: Number
  },
  methods:{
    switchCondition: function() {
      if(this.sequences.condition === 'AND') {
        this.sequences.condition = 'OR';
      } else {
        this.sequences.condition = 'AND';
      }
    },
    addItem: function() {
      this.sequences.rules.push({
        time: {
          type: 'absolute_time',
          values: [
            getDay(-7),
            getDay(0)
          ]
        },
        actions:[]
      });
    },
    removeGroup: function(index) {
      this.sequences.rules.splice(index, 1);
    },
  }
}
</script>

<style scoped>
.as-rules-area {
  margin-bottom: 10px;
  padding: 10px 10px 10px 10px;
  display: flex;
  justify-content: flex-start;
  width: 100%;
  background-color: rgb(247, 247, 247);
}
.as-rules-condition {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 5px 5px;
}

.as-rules-condition .as-rules-split {
  display: inline-block;
  width: 2px;
  background: #2d8cf0;
  height: 100%;
  position: relative;
  left: 17px;
}

.as-rules-condition .as-rules-condition-option {
  position: relative;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  border-radius: 2px;
}
.as-rules-condition-button {
  cursor: pointer;
  padding: 4px 8px;
  border: 1px solid rgb(200, 200, 200);
  background-color: rgb(245, 245, 245);
  border-radius: 3px;
}
.as-rules-items {
  flex: 1;
}
</style>
